import QtQuick 2.12
import QtQml 2.12
import QtQuick.Controls 2.12
import QEXTQmlQuick 1.0

Column{
    spacing: 10

    CheckBox {
        id: mIconVisibleCheckBox
        text: "Icon visiable"
        checked: true
    }

    Row{
        height: 40
        spacing: 10

        QEXTQmlQuickIconButton{
            text: "Normal"
            textFont.bold: true
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
            iconVisible: mIconVisibleCheckBox.checked
        }

        QEXTQmlQuickIconButton{
            text: "Primary"
            textColor: "#FFF"
            textFont.bold: true
            backgroundColor: "#46A0FC"
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
            iconVisible: mIconVisibleCheckBox.checked
        }

        QEXTQmlQuickIconButton{
            text: "Success"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#6AC044"
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Warning"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#E4A147"
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Danger"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#F36D6F"
            iconSource: QEXTQmlQuickFontAwesome.FA_pencil
            iconColor: textColor
        }
    }

    Row{
        height: 40
        spacing: 10
        QEXTQmlQuickIconButton{
            iconDisplay: QEXTQmlQuick.IconDisplay_IconOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            backgroundRadius: height / 2
        }

        QEXTQmlQuickIconButton{
            iconDisplay: QEXTQmlQuick.IconDisplay_IconOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: "#46A0FC"
            backgroundColor: "#ECF5FF"
            backgroundBorderColor: "#46A0FC"
            backgroundRadius: height / 2
        }

        QEXTQmlQuickIconButton{
            iconDisplay: QEXTQmlQuick.IconDisplay_IconOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_windows
            iconColor: "#6AC044"
            backgroundColor: "#F0F9EB"
            backgroundBorderColor: "#6AC044"
            backgroundRadius: height / 2
        }

        QEXTQmlQuickIconButton{
            iconDisplay: QEXTQmlQuick.IconDisplay_IconOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: "#E4A147"
            backgroundColor: "#FDF6ED"
            backgroundBorderColor: "#E4A147"
            backgroundRadius: height / 2
        }

        QEXTQmlQuickIconButton{
            iconDisplay: QEXTQmlQuick.IconDisplay_IconOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_star_o
            iconColor: "#F36D6F"
            backgroundColor: "#FEF0F0"
            backgroundBorderColor: "#F36D6F"
            backgroundRadius: height / 2
        }
    }

    Row{
        height: 40
        spacing: 10
        QEXTQmlQuickIconButton{
            text: "Normal"
            textFont.bold: true
            iconDisplay: QEXTQmlQuick.IconDisplay_TextOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Primary"
            textColor: "#FFF"
            textFont.bold: true
            backgroundColor: "#46A0FC"
            iconDisplay: QEXTQmlQuick.IconDisplay_TextOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Success"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#6AC044"
            iconDisplay: QEXTQmlQuick.IconDisplay_TextOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Warning"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#E4A147"
            iconDisplay: QEXTQmlQuick.IconDisplay_TextOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Danger"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#F36D6F"
            iconDisplay: QEXTQmlQuick.IconDisplay_TextOnly
            iconSource: QEXTQmlQuickFontAwesome.FA_pencil
            iconColor: textColor
        }
    }

    Row{
        height: 40
        spacing: 10
        QEXTQmlQuickIconButton{
            text: "Normal"
            textFont.bold: true
            iconDisplay: QEXTQmlQuick.IconDisplay_Right
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Primary"
            textColor: "#FFF"
            textFont.bold: true
            backgroundColor: "#46A0FC"
            iconDisplay: QEXTQmlQuick.IconDisplay_Right
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Success"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#6AC044"
            iconDisplay: QEXTQmlQuick.IconDisplay_Right
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Warning"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#E4A147"
            iconDisplay: QEXTQmlQuick.IconDisplay_Right
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            text: "Danger"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#F36D6F"
            iconDisplay: QEXTQmlQuick.IconDisplay_Right
            iconSource: QEXTQmlQuickFontAwesome.FA_pencil
            iconColor: textColor
        }
    }

    Row{
        height: 60
        spacing: 10
        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Normal"
            textFont.bold: true
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Bottom
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Primary"
            textColor: "#FFF"
            textFont.bold: true
            backgroundColor: "#46A0FC"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Bottom
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Success"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#6AC044"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Bottom
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Warning"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#E4A147"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Bottom
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Danger"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#F36D6F"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Bottom
            iconSource: QEXTQmlQuickFontAwesome.FA_pencil
            iconColor: textColor
        }
    }

    Row{
        height: 60
        spacing: 10
        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Normal"
            textFont.bold: true
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Top
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Primary"
            textColor: "#FFF"
            textFont.bold: true
            backgroundColor: "#46A0FC"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Top
            iconSource: QEXTQmlQuickFontAwesome.FA_apple
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Success"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#6AC044"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Top
            iconSource: QEXTQmlQuickFontAwesome.FA_android
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Warning"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#E4A147"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Top
            iconSource: QEXTQmlQuickFontAwesome.FA_github
            iconColor: textColor
        }

        QEXTQmlQuickIconButton{
            width: 60
            height: 60
            text: "Danger"
            textFont.bold: true
            textColor: "#FFF"
            backgroundColor: "#F36D6F"
            backgroundRadius: 10
            iconDisplay: QEXTQmlQuick.IconDisplay_Top
            iconSource: QEXTQmlQuickFontAwesome.FA_pencil
            iconColor: textColor
        }
    }
}

